<template>
    <div id="tag">
        {{dynamicTags}}
         <el-table
        :data="dynamicTags"
        style="width: 100%">
        <el-table-column
            prop=""
            label="日期"
            width="180">
            
        </el-table-column>
       
        </el-table>
        <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
        </el-tag>

        <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
        >
        </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button><br>
     <el-button class="button-new-tag" size="small" @click="addGroup">新添加组</el-button>
    </div>

</template>
<script>
export default {
    name:'Tag',
    data(){
        return{
        dynamicTags: [
            
        ],
        inputVisible: false,
        inputValue: '',

        }
    },
    methods:{
     handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
    
}
</script>
<style>

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>

